/*
 * @Author: lmk
 * @Date: 2022-05-26 00:06:29
 * @LastEditTime: 2022-05-26 20:31:57
 * @LastEditors: lmk
 * @Description: 
 */
import React from 'react';
import SeedlingImage from './seedlingImage';
interface Iprops {
  item: {
    [key: string]: any;
  },
  layout?: 'vertical' | 'horizontal' // 排列方式 vertical:竖向排列 horizontal:横向排列
  children?: React.ReactNode;
  onClick?: (item: any) => void;
}
const radiusSize = '13px';
const SeedlingItem = ({ item, layout = 'horizontal', children,onClick }: Iprops) => {
  const isVertical = layout === 'vertical';
  return <div
    className={`flex bg-white ${isVertical ? 'flex-col' : 'flex-row p-5'}`}
    style={{ borderRadius: radiusSize }}
    onClick={onClick}>
    <div className='flex-none'>
      <SeedlingImage
        src={item.productFile?.url}
        state={item.salesStatus}
        width={isVertical ? '100%' : 104}
        stateStyle={isVertical ? { padding: '7px 21px' } : { padding: '5px 13px' }}
        height={isVertical ? 'calc((100vw - 1.5rem) / 2)' : 104}
        borderRadius={isVertical ? `${radiusSize} ${radiusSize} 0 0 ` : radiusSize} />
    </div>
    <div className="pl-3 flex-auto">
      {children}
    </div>
  </div>
};

export default SeedlingItem;
